<script setup lang="ts">
import { ref, onBeforeMount, onMounted,computed,nextTick, } from 'vue'
import { ElMessage as message } from 'element-plus'
import { RefreshRight} from '@element-plus/icons-vue'
import { setTableHeight,setFixedColumnWidth} from '@/common/utils'
import useRoleList,{actionKeys} from './roleList'
import MyTable from '@/components/Table/myTable.vue'
import Add from './add.vue'
import Update from './update.vue'

const columns=ref< tableColConfig[]>( [
	{
		label: '角色名',
		prop: 'roleName',
		columnKey: 'roleName',
		minWidth: 120,
		align: 'center',
	},
	{
		label: '创建者',
		prop: 'creator',
		columnKey: 'creator',
		minWidth: 120,
		align: 'center',
	},
	{
		label: '创建时间',
		prop: 'createdTime',
		columnKey: 'createdTime',
		minWidth: 150,
		align: 'center',
	},
	{
		label: '操作',
		prop: 'operation',
		columnKey:'operation',
		fixed: 'right',
		align: 'center',
		width: 128,
	},
])
const tableHeight = ref<number>()
const addModalVisible = ref(false)
const updateModalVisible = ref(false)
const editRole = ref({} as RoleItem)
const addRef = ref<InstanceType<typeof Add>>()
const updateRef = ref<InstanceType<typeof Update>>()
const tableRef = ref<InstanceType<typeof MyTable>>()

const roleList = useRoleList()

onBeforeMount(() => {
	roleList.getList()
})

onMounted(() => {
	setTableHeight({tableHeightRef:tableHeight})

	setFixedColumnWidth([actionKeys.update,actionKeys.delete],columns)
})

const tableData = computed(() => {
	if (!tableRef.value) return []
	const pageNum = tableRef.value!.pageNum
	const pageSize = tableRef.value!.pageSize
	return JSON.parse(JSON.stringify(roleList.list)).splice((pageNum - 1) * pageSize, pageSize)
})

function reset() {
	roleList.getList()
	tableRef.value?.reset()
}
function handleAdd() {
	addModalVisible.value = true
	nextTick(() => {
		addRef.value?.init()
	})
}
async function handleAddCommit() {
	const isSuccess = await addRef.value?.formCommit()
	if (isSuccess) {
		addModalVisible.value = false
		message.success('新增成功')
	}
}
function handleUpdate(row: RoleItem) {
	editRole.value = row
	updateModalVisible.value = true
	nextTick(() => {
		updateRef.value?.init()
	})
}
async function handleUpdateCommit() {
	const isSuccess = await updateRef.value?.formCommit()
	if (isSuccess) {
		updateModalVisible.value = false
		message.success('更新成功')
	}
	if(typeof isSuccess==='string'){
		setTimeout(()=>{
        location.reload()
	},1500)
	}
}
async function handleDelete(row: RoleItem) {
	const res = await roleList.deleteItem(row.id)
	if (res.code) {
		message.success('删除成功')
	}
}
</script>

<template>
	<div class="roleManage">
		<div class="tableTool">
			<el-button type="primary" style="margin-right: 5px" @click="handleAdd" v-if="$hasAuth([actionKeys.add])">新增角色</el-button>
			<el-button type="primary" @click="reset">
				<el-icon>
					<RefreshRight />
				</el-icon>
			</el-button>
		</div>
		<my-table
			:data="tableData"
			:columns="columns"
			size="small"
			style="width: 100%"
			class="myTable"
			rowKey="name"
			:maxHeight="tableHeight"
			:pagination="{
				pageSizes: [10, 20, 30, 40, 50],
				small: true,
				background: true,
				layout: 'total, sizes, prev, pager, next, jumper',
				total: roleList.list.length,
			}"
			ref="tableRef"
		>
			<template #operation="{ row }">
				<el-button type="primary" size="small" @click="handleUpdate(row)" v-if="$hasAuth([actionKeys.update])">修改</el-button>
				<el-popconfirm title="确定要删除吗?" confirm-button-text="确定" cancel-button-text="取消" @confirm="handleDelete(row)" v-if="$hasAuth([actionKeys.delete])">
					<template #reference><el-button type="danger" size="small" >删除</el-button></template>
				</el-popconfirm>
			</template>
		</my-table>

		<el-dialog v-model="addModalVisible" title="新增角色" width="80%" :modal="false" draggable :close-on-click-modal="false" align-center>
			<Add ref="addRef" />
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="addModalVisible = false">取消</el-button>
					<el-button type="primary" @click="handleAddCommit">确定</el-button>
				</div>
			</template>
		</el-dialog>

		<el-dialog v-model="updateModalVisible" title="更新角色" width="80%" :modal="false" draggable :close-on-click-modal="false" align-center>
			<Update :editRole="editRole" ref="updateRef" />
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="updateModalVisible = false">取消</el-button>
					<el-button type="primary" @click="handleUpdateCommit">确定</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<style scoped lang="scss">
.roleManage {

	.tableTool {
		padding: 10px 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	:deep(.el-table thead .el-table__cell) {
		text-align: center ;
		// background-color: rgb(232, 246, 241) !important;
}
}
</style>
